import {
  Button, 
  Drawer,  
  Space,
  Form,
  Input,
  Radio,
  Select,
} from 'antd';
import { useState,useEffect } from 'react';
import {getCategory} from '@/api/shopping'
import {useDispatch} from 'react-redux'
import {setAxiosCondition} from '@/store/shopping/Tabulation'
const Notification = props => {
  const dispatch = useDispatch()

  const [search,setSearch] = useState('')
  const [sortType,setSortType] = useState('id')
  const [category,setCategory] = useState('')
  
  const onClose = () => {
    props.close();
  };
  const [options,setOptions] = useState([])
  useEffect(() => {
    getCategory().then(res=>{
      setOptions(res.data.list)
    })
  },[])

  const submit = () => {
    dispatch(setAxiosCondition({
      search,sortType,category,current:1
    }))
    props.onSearch()
    onClose()
  }
  return (
    <>
      <Drawer
        title="查找商品"
        placement='top'//top right bottom left在四个方向上弹出
        width={500}
        onClose={onClose}
        open={true}
        extra={
          <Space>
            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={submit}>
              查询
            </Button>
          </Space>
        }
      >
    <Form
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 14,
      }}
      layout="horizontal"

      style={{
        maxWidth: 600,
      }}
    >
      <Form.Item label="查询商品">
        <Input value={search} onChange={(e)=>{setSearch(e.target.value)}} />
      </Form.Item>
      <Form.Item label="排序方法">
        <Radio.Group
          defaultValue="id"
          value={sortType} onChange={(e)=>{setSortType(e.target.value)}}
        >
          <Radio.Button value="id">商品序号</Radio.Button>
          <Radio.Button value="sale">商品折扣</Radio.Button>
          <Radio.Button value="price">商品价格</Radio.Button>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="分类">
        <Select onChange={e=>{setCategory(e)}}>
          {
            options.map((item)=>{
              return <Select.Option  value={item} key={item}>{item}</Select.Option>
            })
          }
        </Select>
      </Form.Item>
    </Form>
      </Drawer>
    </>
  );
};
export default Notification;